<template>
  <div class="root">
    <div>
      <div class="Profile_title__2sAbv">
        <img class="Profile_bg__1R-1W" src="http://localhost:8080/img/profile/bg.png" alt="背景图">
        <div class="Profile_info__2HK-Y">
          <div class="Profile_myIcon__10OQ7">
            <img
              class="Profile_avatar__GfZao"
              :src="isAu? url+auMessage.avatar :`${url}/img/profile/avatar.png`"
              alt="icon"
            >
          </div>
          <div class="Profile_user__1bqfm">
            <div class="Profile_name__xkUu5">{{isAu ? auMessage.nickname:'游客'}}</div>
            <div class="Profile_edit__1xA8O">
              <a
                role="button"
                class="am-button am-button-primary am-button-small am-button-inline"
                aria-disabled="false"
              >
                <span @click="login" class="login">{{isAu ? '退出':'去登录'}}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="am-grid am-grid-square">
        <div class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch">
          <div class="am-flexbox-item am-grid-item" style="width: 33.3333%;">
            <div class="am-grid-item-content">
              <a href="/favorate">
                <div class="Profile_menuItem__zipA5">
                  <i class="iconfont icon-coll"></i>
                  <span>我的收藏</span>
                </div>
              </a>
            </div>
          </div>
          <div class="am-flexbox-item am-grid-item" style="width: 33.3333%;">
            <div class="am-grid-item-content" @click="$router.push('/rent')">
              <a>
                <div class="Profile_menuItem__zipA5">
                  <i class="iconfont icon-ind"></i>
                  <span>我的出租</span>
                </div>
              </a>
            </div>
          </div>
          <div class="am-flexbox-item am-grid-item" style="width: 33.3333%;">
            <div class="am-grid-item-content">
              <div class="Profile_menuItem__zipA5">
                <i class="iconfont icon-record"></i>
                <span>看房记录</span>
              </div>
            </div>
          </div>
        </div>
        <div class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch">
          <div class="am-flexbox-item am-grid-item" style="width: 33.3333%;">
            <div class="am-grid-item-content">
              <div class="Profile_menuItem__zipA5">
                <i class="iconfont icon-identity"></i>
                <span>成为房主</span>
              </div>
            </div>
          </div>
          <div class="am-flexbox-item am-grid-item" style="width: 33.3333%;">
            <div class="am-grid-item-content">
              <div class="Profile_menuItem__zipA5">
                <i class="iconfont icon-myinfo"></i>
                <span>个人资料</span>
              </div>
            </div>
          </div>
          <div class="am-flexbox-item am-grid-item" style="width: 33.3333%;">
            <div class="am-grid-item-content">
              <div class="Profile_menuItem__zipA5">
                <i class="iconfont icon-cust"></i>
                <span>联系我们</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Profile_ad__1xcEa">
        <img src="http://localhost:8080/img/profile/join.png" alt>
      </div>
    </div>
  </div>
</template>
<script>
import { isAu, request, url, setToken } from "../utils/index.js";
export default {
  data() {
    return {
      isAu: isAu(),
      auMessage: {},
      url: url
    };
  },
  async created() {
    if (this.isAu) {
      const res = await request.get("/user");
      if (res.data.status === 400) {
        this.isAu = false;
      } else if (res.data.status === 200) {
        this.auMessage = res.data.body;
      }
    }
  },
  methods: {
    async login() {
      if (this.isAu) {
        const res = await request.post("/user/logout");
        if (res.data.status === 200) {
          setToken("");
          this.isAu = false;
          this.auMessage = {};
          this.$toast.success("退出成功");
        }
      } else {
        this.$router.push("/user/login");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.root {
  padding-bottom: 50px;
}
.Profile_title__2sAbv {
  min-height: 300px;
  position: relative;
  .Profile_bg__1R-1W {
    width: 100%;
  }
  .Profile_info__2HK-Y {
    position: absolute;
    background: #fff;
    width: 85%;
    height: 55%;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    padding-top: 0;
    text-align: center;
    font-size: 13px;
    .Profile_myIcon__10OQ7 {
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: solid 5px #f5f5f5;
      display: inline-block;
      box-shadow: 0px 2px 2px #bdbdbd;
      .Profile_avatar__GfZao {
        width: 100%;
        border-radius: 50%;
      }
    }
    .Profile_user__1bqfm {
      padding-top: 15px;
      .Profile_name__xkUu5 {
        margin-top: -30px;
        margin-bottom: 10px;
      }
      .Profile_edit__1xA8O {
        display: flex;
        justify-content: center;
        color: #999;
        font-size: 12px;
        margin-top: 20px;
      }
      .login {
        display: block;
        width: 70px;
        height: 30px;
        color: #ffffff;
        line-height: 30px;
        border-radius: 5px;
        background-color: #21b97a;
      }
    }
  }
}
.am-flexbox {
  margin-top: 10px;
  display: flex;
  .am-flexbox-item {
    border-bottom: 1px solid #cccccc;
  }
  .am-grid-item-content {
    width: 125px;
    height: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      color: #333333;
      display: block;
      height: 100%;
      width: 100%;
    }
    .Profile_menuItem__zipA5 {
      .iconfont {
        font-size: 20px;
        margin-top: 18px;
      }
      span {
        margin-bottom: 18px;
      }
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
  }
}
.Profile_ad__1xcEa {
  text-align: center;
  margin-top: 10px;
}
.Profile_ad__1xcEa img {
  width: 92%;
}
</style>
